<template>
  <div>
    <h1>路由</h1><hr><br>
    <router-link to="/home">首页</router-link>

    <!-- <router-link to="/home?id=1&name=仙女">🧚🏻‍♀️</router-link>
    <router-link to="/home?id=2&name=美女">🧚🏻‍♀️</router-link> -->

    <router-link to="/about/1/小新">小新</router-link>
    <router-link to="/about/2/妮妮">妮妮</router-link>
    <router-link to="/about/3/风间">风间</router-link>

    <router-link to="/hamburger">汉堡</router-link>
    <!-- 占位符 -->
    <router-view></router-view>

    <!-- <a href="#/home">首页</a>&nbsp;&nbsp;
    <a href="#/hamburger">汉堡</a>&nbsp;&nbsp;
    <a href="#/about">详情</a> -->
    
    <!-- <component :is="comName"></component> -->
  </div>
</template>

<script>
// import MyHamburger from './components/MyHamburger.vue'
// import MyHome from '@/components/MyHome.vue'
// import MyAbout from '@/components/MyAbout.vue'
export default {
  // components: { MyHamburger,MyHome ,MyAbout},
  // data () {
  //   return {
  //     comName : 'MyHome'
  //   }
  // },
  // created () {
  //   window.addEventListener('hashchange', () => {
  //     const hash = location.hash
  //     if(hash === '#/home') {
  //       this.comName = 'MyHome'
  //     } else if (hash === '#/hamburger') {
  //       this.comName = 'MyHamburger'
  //     } else if (hash === '#/about') {
  //       this.comName = 'MyAbout'
  //     } else {
  //       this.comName =' MyHome'
  //     }
  //   })
  // }

}
</script>

<style>
h1{
color: rgb(115, 75, 75);
}
a {
  text-decoration: none;
  color: tomato;
  border: solid 5px plum;
  border-radius: 28px;
  padding: 5px;
  background-color: pink;
  } 
</style>